// index.js
// 获取应用实例
const app = getApp()
var width = 0;
var height = 0;
var hLineNum = 0;
var vLineNum = 0;
var x_start = 25;
var lineCtx = null;
var grid_width = 5;
var timeId = null;

Page({
  data: {

  },
  

  onLoad() {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },
  start: function (params) {  // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#line')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init.bind(this))

  },
  init(res) {
    width = res[0].width
    height = res[0].height
    const canvas = res[0].node
    lineCtx = canvas.getContext('2d')

    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    lineCtx.scale(dpr, dpr)



    class WaveView {
      currentX = 0;
      currentY = 0;
      lastX = 0;
      lastY = 0;
      // 每次画几个点
      step = 10;
      // Y值最大值
      yMax = 300;
      // 每个波形的高度
      itemHeight = 100;
      // 橡皮檫宽度
      clearGap = 20;
      y_offset = 0;
      // 队列
      queue = [];
      strokeStyle = "#0f0";

      /**
       * @param frameSize 1秒多少个点
       * @param yMax
       * @param y_offset y偏移
       * @param step 每次画几个点
       * @param speedRatio 扫纸速度，默认 25mm/s (1秒25个小格子 每个小格子0.04s)。 0.5表示扫纸速度为 12.5mm/s。2表示扫纸速度为 50mm/s。
       * @param strokeStyle 线的样式
       */
      constructor(frameSize, yMax, y_offset, step, speedRatio, strokeStyle) {
        this.frameSize = frameSize;
        this.yMax = yMax;
        this.lastY = this.itemHeight / 2;
        this.y_offset = y_offset;
        this.step = step;
        this.speedRatio = speedRatio;
        this.strokeStyle = strokeStyle;
        this.drawInterval = Math.floor((1 / this.frameSize) * 1000 * this.step); // 绘制时间间隔
      }

      draw = () => {
        lineCtx.beginPath();
        lineCtx.strokeStyle = this.strokeStyle;
        if (this.lastX === 0) {
          lineCtx.clearRect(x_start - 2, this.y_offset, this.clearGap, this.itemHeight);
        } else {
          lineCtx.clearRect(x_start + this.lastX, this.y_offset, this.clearGap, this.itemHeight);
        }

        for (let i = 0; i < this.step; i++) {
          if (this.queue.length === 0) {
            this.currentY = this.itemHeight / 2;
          } else {
            this.currentY = (-1.0 * this.queue.shift()) / this.yMax * this.itemHeight + this.itemHeight;
          }

          if (this.currentY > this.itemHeight) {
            this.currentY = this.itemHeight;
          }

          lineCtx.moveTo(x_start + this.lastX, this.y_offset + this.lastY);
          lineCtx.lineTo(x_start + this.currentX, this.y_offset + this.currentY);

          this.lastX = this.currentX;
          this.lastY = this.currentY;

          this.currentX += (grid_width * 25 * this.speedRatio) / this.frameSize;
          if (x_start + this.currentX >= width - 25) {
            this.currentX = 0;
            this.lastX = 0;
          }
        }

        lineCtx.stroke();
      }
    
      loop = () => {
        this.draw();
      
        timeId= setTimeout(this.loop, this.drawInterval);
      
        // TODO for test only 添加测试数据，实际中会从后台取
        this.addData([122, 122, 122, 122, -122, -122, -122, -122, -122, -122, -122, -122, -122, -122, 122, 122, 122, 123, 125, 127, 130, 133, 135, 137, 138, 139, 140, 140, 139, 138, 136, 134, 130, 127, 125, 124, 123, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 121, 119, 116, 113, 111, 132, 151, 171, 190, 210, 229, 210, 190, 171, 151, 132, 112, 114, 117, 120, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 123, 124, 124, 126, 128, 131, 133, 134, 136, 140, 143, 144, 146, 149, 150, 152, 153, 153, 154, 155, 156, 157, 156, 155, 153, 153, 152, 150, 149, 146, 145, 142, 138, 135, 133, 129, 127, 124, 123, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122, 122])
        console.log("进来了")
      }
      addData = (arr) => {
        for (let i = 0; i < arr.length; i++) {
          this.queue.push(arr[i]);
        }
      }
    }


    let ecgWave = new WaveView(250, 250, 0, 10, 1, '#00ff00');

    let respWave = new WaveView(200, 250, 50, 10, 0.5, '#00ff00');

    let spo2Wave = new WaveView(100, 250, 200, 10, 1, '#00F5FF');


    // ecgWave.loop();

    respWave.loop();

    // spo2Wave.loop();


},
  stop: function (params) {
    clearTimeout(timeId)
  },
})